<script setup>
import VisualLayout from '@/components/VisualLayout.vue'
import BarChartStackHorizontal from '@/components/BarChartStackHorizontal.vue'
import BarChartCount from '@/components/BarChartCount.vue'
import BarChartStack from '@/components/BarChartStack.vue'
import BarLineChart from '@/components/BarLineChart.vue'
import BarLineChart2 from '@/components/BarLineChart2.vue'
import BarChartPictorial from '@/components/BarChartPictorial.vue'
import PieHuan from '@/components/PieHuan.vue'

const PieHuanParams = ref([
  {
    statusName: '设备稼动',
    statusText: '已完成',
    value: 80,
    color: 0,
  },
  {
    statusName: '工厂稼动',
    statusText: '结束',
    value: 30,
    color: 1,
  },
  {
    statusName: '经营稼动',
    statusText: '已完成',
    value: 80,
    color: 2,
  },
  {
    statusName: '品质',
    statusText: '已完成',
    value: 60,
    color: 3,
  },
])
// setTimeout(() => {
//   PieHuanParams.value[0] = {
//     statusName: '工厂稼动',
//     statusText: '结束',
//     value: 30,
//     color: 1
//   }
// }, 2000)
</script>
<template>
  <VisualLayout>
    <div class="grid-container">
      <div class="column1">
        <BarChartStackHorizontal></BarChartStackHorizontal>
        <BarChartCount></BarChartCount>
      </div>
      <div class="column2">
        <div class="earth-box">
          <!-- <img class="earth-img" src="../assets/image/home/earth.png" alt=""> -->
          <div class="status-item center">正常生产</div>
          <div class="status-item error">设备故障</div>
          <div class="status-item running">上料等待</div>
          <div class="status-item none">无计划</div>
        </div>
        <BarLineChart style="height: 300px; flex: none" :params="PieHuanParams"></BarLineChart>
      </div>
      <div class="column3">
        <BarChartStack></BarChartStack>
        <BarLineChart2></BarLineChart2>
      </div>
    </div>
  </VisualLayout>
</template>

<style lang="less" scoped>
.grid-container {
  height: 100%;
  flex: 1;
  display: flex;
  padding: 30px;
  padding-top: 0px;

  /* 行间距 */
  .column1,
  .column3 {
    display: flex;
    flex-direction: column;
    width: 30%;
    grid-row: span 2;
  }

  .column2 {
    width: 40%;
    grid-row: span 2;
    padding: 0px 20px;
    display: flex;
    flex-direction: column;
  }
}

.earth-box {
  position: relative;
  text-align: center;
  padding-bottom: 20px;
  flex: 1;
  background: url(../assets/image/production/earth-bg.png) center center no-repeat;
  background-size: contain;

  .status-item {
    position: absolute;
    font-weight: bold;
    color: #05FEC6;
    font-size: 16px;

    &.center {
      top: 22%;
      left: 50%;
      margin-left: -6%;
      font-size: 1.6rem;
      color: white;
    }

    &.error {
      top: 53%;
      left: 14.5%;
    }

    &.running {
      top: 56%;
      left: 47.5%;
    }

    &.none {
      top: 47%;
      right: 14.5%;
    }
  }


  .earth-img {
    width: 100%;
  }
}

@media (min-width: 1024px) {}
</style>
